<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <br />

    <span>
      搜索：
      <el-input
          style="width:200px"
          placeholder="商品名"
          @input="search"
          v-model="search_title"
      ></el-input>
    </span>
    <el-button type="primary" icon="el-icon-search"></el-button>

    <el-tabs v-model="activeName" @tab-click="handleClick" class="order-tab">
      <el-tab-pane label="待支付" name="first">
        <el-table :data="tableData" style="width: 100%" class="table">
          <el-table-column prop="title" label="商品名"></el-table-column>
          <el-table-column prop="sales_price" label="价格"></el-table-column>
          <el-table-column prop="qty" label="数量"></el-table-column>
          <el-table-column prop="sku_no" label="SKU"></el-table-column>
          <el-table-column prop="order_id" label="订单号"></el-table-column>
          <el-table-column prop="total" label="总计"></el-table-column>
          <el-table-column prop="order_created_time" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="pay(scope.row, scope.$index)">支付</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待发货" name="second">
        <el-table :data="tableData" style="width: 100%" class="table">
          <el-table-column prop="title" label="商品名"></el-table-column>
          <el-table-column prop="receive_name" label="收货人"></el-table-column>
          <el-table-column prop="sales_price" label="价格"></el-table-column>
          <el-table-column prop="qty" label="数量"></el-table-column>
          <el-table-column prop="sku_no" label="SKU"></el-table-column>
          <el-table-column prop="order_id" label="订单号"></el-table-column>
          <el-table-column prop="paid_time" :formatter="dateFormat" label="更新时间"></el-table-column>
          <el-table-column prop="total" label="总计"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已发货" name="third">
        <el-table :data="tableData" style="width: 100%" class="table">
          <el-table-column prop="title" label="商品名"></el-table-column>
          <el-table-column prop="sales_price" label="价格"></el-table-column>
          <el-table-column prop="qty" label="数量"></el-table-column>
          <el-table-column prop="sku_no" label="SKU"></el-table-column>
          <el-table-column prop="order_id" label="订单号"></el-table-column>
          <el-table-column prop="total" label="总计"></el-table-column>
          <el-table-column prop="ship_time" :formatter="dateFormat" label="发货时间"></el-table-column>
          <el-table-column prop="tracking_number" label="运单号">
            <template slot-scope="scope">
              <el-popover placement="bottom" width="250" trigger="hover">
                <el-timeline>
                  <el-timeline-item timestamp="2022-06-17 10:38:50" color="#67C23A">开始运输</el-timeline-item>
                  <el-timeline-item timestamp="2022-06-17 13:27:31" color="#67C23A">到达上海</el-timeline-item>
                  <el-timeline-item>完成</el-timeline-item>
                </el-timeline>
                <el-link type="warning" slot="reference">{{scope.row.tracking_number}}</el-link>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已完成订单" name="fourth">
        <el-table :data="tableData" style="width: 100%" class="table">
          <el-table-column prop="title" label="商品名"></el-table-column>
          <el-table-column prop="sales_price" label="价格"></el-table-column>
          <el-table-column prop="qty" label="数量"></el-table-column>
          <el-table-column prop="sku_no" label="SKU"></el-table-column>
          <el-table-column prop="order_id" label="订单号"></el-table-column>
          <el-table-column prop="total" label="总计"></el-table-column>
          <el-table-column prop="tracking_number" label="运单号">
            <template slot-scope="scope">
              <el-popover placement="bottom" width="250" trigger="hover">
                <el-timeline>
                  <el-timeline-item timestamp="2022-06-12 20:46" color="#67C23A">开始运输</el-timeline-item>
                  <el-timeline-item timestamp="2022-06-13 20:46" color="#67C23A">发往上海</el-timeline-item>
                  <el-timeline-item timestamp="2022-06-14 20:46" color="#67C23A">到达上海</el-timeline-item>
                  <el-timeline-item timestamp="2022-06-15 20:46" color="#67C23A">完成</el-timeline-item>
                </el-timeline>
                <el-link type="success" slot="reference">{{scope.row.tracking_number}}</el-link>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已取消订单" name="fifth">
        <el-table :data="tableData" style="width: 100%" class="table">
          <el-table-column prop="title" label="商品名"></el-table-column>
          <el-table-column prop="sales_price" label="价格"></el-table-column>
          <el-table-column prop="qty" label="数量"></el-table-column>
          <el-table-column prop="sku_no" label="SKU"></el-table-column>
          <el-table-column prop="order_id" label="订单号"></el-table-column>
          <el-table-column prop="total" label="总计"></el-table-column>
          <el-table-column prop="cancelled_time" :formatter="dateFormat" label="取消时间"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-drawer
      title="drawer"
      :visible.sync="drawer"
      size="50%"
      :wrapperClosable="false"
      :with-header="false"
    >
      <div class="pay-form-div">
        <h3>订单支付</h3>
        <el-form :model="payForm" ref="payForm" label-width="150px" class="pay-form">
          <el-form-item
            label="收获人"
            prop="name"
            :rules="[{ required: true, message: '请输入收货者'}]"
          >
            <el-input style="width:35rem" v-model="payForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <br />
          <el-form-item
            label="地址"
            prop="address"
            :rules="[{ required: true, message: '请输入地址'}]"
          >
            <el-input style="width:35rem" v-model="payForm.address" autocomplete="off"></el-input>
          </el-form-item>
          <br />
          <el-form-item
            label="电话号码"
            prop="phone"
            :rules="[{ required: true, message: '请输入电话号码'}]"
          >
            <el-input style="width:35rem" v-model="payForm.phone" autocomplete="off"></el-input>
          </el-form-item>
          <br />
          <el-form-item label="数量" prop="num">
            <el-input style="width:35rem" v-model="payForm.qty" :disabled="true" autocomplete="off"></el-input>
          </el-form-item>
          <br />
          <el-form-item class="pay-form-button">
            <el-button type="primary" @click="payNow('payForm')">立即支付</el-button>
            <el-button @click="drawer=false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <el-dialog title="Payment" :visible.sync="dialogVisible" width="30%">
      <el-form :model="paymentForm" ref="paymentForm" label-width="130px">
        <el-form-item label="总金额" prop="totalMoney">
          <el-input
            style="width:20rem"
            v-model="paymentForm.totalMoney"
            :disabled="true"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <br />
        <el-form-item label="可用金额" prop="availableMoney">
          <el-input
            style="width:20rem"
            v-model="paymentForm.availableMoney"
            :disabled="true"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <br />
        <el-form-item
          label="密码"
          prop="password"
          :rules="[{ required: true, message: '请输入密码！'}]"
        >
          <el-input
            placeholder="请输入密码"
            v-model="paymentForm.password"
            show-password
          ></el-input>
        </el-form-item>
        <br />
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="submitForm('paymentForm')">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </span>
    </el-dialog>

    <el-drawer title="drawerDetail" :visible.sync="itemDrawer" size="50%" :with-header="false">
      <div class="goods-div">
        <h2>{{chooseItem.title}}</h2>
        <div class="base-info">
          <img :src="chooseItem.remark" class="img" />
          <div style="width:25rem">
            <p>{{chooseItem.title}}</p>
            <el-link :underline="false" type="primary">¥ {{chooseItem.retail_price}}</el-link>
            <p>品牌: {{chooseItem.name_en}}</p>
            <p>库存: {{chooseItem.replenishment_period}}</p>
          </div>
        </div>
        <br />
        <el-tabs v-model="activeNameDetail" class="tab">
          <el-tab-pane label="Amazon的描述" name="first">
            <article v-html="compileMarkDown(chooseItem.amazon_description)" ></article> 
          </el-tab-pane>
          <el-tab-pane label="ebay的描述" name="second">
            <article v-html="compileMarkDown(chooseItem.ebay_description)" ></article>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import showdown from 'showdown'
var converter = new showdown.Converter();
export default {
  data() {
    return {
      drawer: false,
      opRow: "",
      opIndex: "",
      tableData: [],
      table: [],
      search_title: "",
      itemDrawer: false,
      activeNameDetail: "first",
      activeName: "first",
      chooseItem: '',
      payForm: {
        selected: "",
        name: "",
        address: "",
        phone: "",
        qty: ""
        // trackingCompany: ""
      },
      dialogVisible: false,
      paymentForm: {
        password: "",
        totalMoney: "",
        availableMoney: ""
      }
    };
  },
  mounted() {
    this.$post("/order/getOrders", {
      user_id: sessionStorage.getItem("user_id"),
      sts_cd: "1"
    }).then(res => {
      //处理response
      console.log(res);
      if (res.code === 504) {
        this.$message.warning(res.message);
        return;
      }
      if (res.code === 200) {
        // this.$root.user_id=res.data.user_id;
        this.tableData = res.data;
        this.table = res.data;
        console.log(res);
      }
    });
  },
  methods: {
    compileMarkDown(value) {
      return converter.makeHtml(value)
    },
    showDetail(row) {

      this.$post("/product/getProduct", {
        pro_id: row.pro_id
      }).then(res => {
        if (res.code === 200) {
          this.chooseItem = res.data;
          this.itemDrawer = true;
        } else {
          this.$message.warning(res.message)
        }

      })

    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
    payNow(formName) {
      console.log(this.payForm.trackingCompany);
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$post("/wal/getAvailable_money", {
            user_id: sessionStorage.getItem("user_id")
          }).then(res => {
            if (res.code == 504) {
              this.$message.warning(res.message);
              return;
            }
            if (res.code == 200) {
              this.paymentForm.availableMoney = res.message;
              this.paymentForm.totalMoney =
                  this.opRow.qty * this.opRow.sales_price;
              this.dialogVisible = true;
              this.$refs[formName].resetFields();
            }
          });
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.dialogVisible = false;
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // console.log(this.payForm);
          this.drawer = false;
          this.dialogVisible = false;

          this.$post("/order/payOrder", {
            or_id: this.opRow.or_id,
            user_id: sessionStorage.getItem("user_id"),
            password: this.paymentForm.password
          }).then(res => {
            if (res.code == 504) {
              this.$message.warning(res.message);
              this.$refs[formName].resetFields();
              return;
            }
            if (res.code == 200) {
              // this.$root.user_id=res.data.user_id;
              this.$message.success(res.message);
              this.deleteRow(this.opIndex);
              this.$refs[formName].resetFields();
            }
          });
        } else {
          return false;
        }
      });
    },
    pay(row, index) {
      if (sessionStorage.getItem("user_id") == 3) {
        this.$message.warning("Admin can not operate")
        return
      }
      this.drawer = true;
      this.opRow = row;
      this.payForm.qty = row.qty;
      this.opIndex = index;
    },
    handleClick(tab) {
      this.tableData = "";
      console.log(tab.index);
      let tmpStscd = 0;
      if (tab.index == 0) {
        tmpStscd = 1;
      }
      if (tab.index == 1) {
        tmpStscd = 2;
      }
      if (tab.index == 2) {
        tmpStscd = 3;
      }
      if (tab.index == 3) {
        tmpStscd = 4;
      }
      if (tab.index == 4) {
        tmpStscd = 0;
      }
      this.$post("/order/getOrders", {
        user_id: sessionStorage.getItem("user_id"),
        sts_cd: tmpStscd
      }).then(res => {
        console.log(res);
        this.tableData = res.data;
        this.table = res.data;
      });
    },
    search() {
      this.tableData = this.table.filter(e => e.title.match(this.search_title));
    },
    //时间格式化的方法
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property]
      if (daterc != null) {
        var date = new Date(daterc);
        var year = date.getFullYear();
        /* 在日期格式中，月份是从0开始，11结束，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      }
    }
  }
};
</script>

<style>
.table {
  margin-top: 0.5rem;
}
.order-tab {
  margin-top: 2rem;
}
.el-tabs__item.is-active {
  color: #1598ec;
}
.el-tabs__active-bar {
  background-color: #1598ec;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #1598ec;
  border-color: #1598ec;
}


.tab >>> .el-tabs__item.is-active {
  color: #1598ec;
}
.tab >>> .el-tabs__active-bar {
  background-color: #1598ec;
}
.goods-div {
  margin-left: 3rem;
  height: 60rem;
}
.base-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.img {
  width: 20rem;
  height: 20rem;
}
.goods-row {
  width: 94%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.tab {
  width: 50rem;
}


.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #1598ec;
  border-color: #1598ec;
}
.pay-form-div {
  margin-left: 3rem;
  height: 50rem;
}
.pay-form {
  margin-top: 5rem;
}
.pay-form-button {
  margin-left: 24rem;
}
</style>